<template>
    <div class="box">
        <div class="top">
            <p class="title">实时游客统计</p>
            <p class="bg"></p>
            <p class="right">可预约总量：<span>9999人</span></p>
        </div>
        <div class="number">
            <span v-for="(item,index) in people" :key="index">{{ item }}</span>
        </div>
        <!-- echarts展示图像图表的结点 -->
        <div class="charts" ref="charts">
        </div>
    </div>
</template>

<script lang="ts" setup name="Tourist">
    import {ref,onMounted} from 'vue'
    import * as echarts from 'echarts'
    // 水球图拓展插件
    import 'echarts-liquidfill'

    let people=ref('216908人')
    // 获取节点
    let charts=ref()

    onMounted(()=>{
        // 获取echarts类的实例
        let mycharts=echarts.init(charts.value)
        // 设置实例的配置项
        mycharts.setOption({
            // 标题组件
            title:{
                text:'预约量',
                textStyle:{
                    color:'skyblue'
                },
                left:'43%',
                top:"20%"
            },
            // x|y轴组件
            xAxis:{},
            yAxis:{},
            // 系列：决定你展示什么样的图像图表
            series:{
                type:'liquidFill', // 系列
                data:[0.6,0.4,0.2], // 展示数据
                waveAnimation: true, // 是否要动画
                animationDuration: 3,
                animationDurationUpdate: 0,
                center: ["50%", "50%"],
                z: 2,
                radius:'95%', // 半径
                outline: { // 外面的颜色
                    borderDistance: 0,
                    itemStyle: {
                        borderColor: '#31d8d5',
                        borderWidth: 2,
                        shadowBlur: 20,
                        shadowColor: '#50c1a7'
                    }
                },
                itemStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#35FAB6" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(40, 209, 247,0.3)" // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                },
                label: {         
                    show: false
                },
                backgroundStyle: {
                    borderWidth: 1,
                    // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                    color: {
                        type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#0D2648" // 0% 处的颜色
                            },
                            {
                                offset: 0.8,
                                color: "#0D2648" // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#228E7D" // 100% 处的颜色
                            }
                        ],
                        global: false // 缺省为 false
                    }
                }
            },
            // 布局组件
            grid:{
                left:0,
                right:0,
                top:0,
                bottom:0
            }
        })
    })
</script>

<style scoped lang="scss"> 
    .box{
        background:url(../../images/dataScreen-main-lb.png) no-repeat;
        background-size:100% 100%;
        margin-top:10px;
    }

    .top{
        margin-left: 20px;
    }

    .title{
        color: white;
        font-size: 20px;
    }

    .bg{
        width: 68px;
        height: 7px;
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;
    }

    .right{
        float: right;
        color: white;
        font-size: 20px;
    }

    .right span{
        color: yellowgreen;
    }

    .number{
        margin-top: 30px;
        display: flex;
        padding: 10px;
    }

    .number span{
        flex: 1;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: url(../../images/total.png) no-repeat;
        background-size: 100% 100%;
        color: #29fcff;
    }

    .charts{
        width: 100%;
        height: 250px;
    }
</style>